<template>
	<view class="template">
		<view class="top">
			<image class="image" :src="isurl.Url" mode="aspectFill"></image>
			<view class="text_box">
				<text class="text">{{isurl.Text}}</text>
				<text class="istext">月均{{isurl.Monthly_average}}元</text>
			</view>
			<view class="prompt">
				<text>{{isurl.Prompt}}</text>
				<hr class="ishr" />
			</view>
			<view class="Order_price">
				<text>订购价:￥{{isurl.Order_price}}</text>
			</view>
		</view>
		<view style="height: 5vw;"></view>
		<view class="middle">
			<text>支付方式：</text>
			<view class="isway waybox" @click="isway='wechat'">
				<view class="isway">
					<image src="../../static/微信支付.png" mode="aspectFill" class="way_image"></image>
					<text>微信支付</text>
				</view>
				<image :src="isway=='wechat' ? '../../static/选中.png' : '../../static/未选中.png'" mode="aspectFill"
					class="buttom"></image>
			</view>
			<view class="isway waybox" @click="isway='Alipay'">
				<view class="isway">
					<image src="../../static/支付宝.png" mode="aspectFill" class="way_image"></image>
					<text>支付宝支付</text>
				</view>
				<image :src="isway=='Alipay' ? '../../static/选中.png' : '../../static/未选中.png'" mode="aspectFill"
					class="buttom"></image>
			</view>
			<view class="isway waybox" @click="isway='Balance'">
				<view class="isway">
					<image src="../../static/余额支付.png" mode="aspectFill" class="way_image"></image>
					<text>余额支付</text>
					<text style="color: red;">（余额：￥{{user_data.Balance}}）</text>
				</view>
				<image :src="isway=='Balance' ? '../../static/选中.png' : '../../static/未选中.png'" mode="aspectFill"
					class="buttom"></image>
			</view>
		</view>
		<view class="middle_text">
			<text>使用余额支付可享受储值价优惠，余额不足可先充值。</text>
		</view>
		<view class="bottom">
			<view class="left box">
				<text>合计:</text>
				<text style="color: red;">￥</text>
				<text class="isOrder_price">{{isurl.Order_price}}</text>
			</view>
			<view class="right box">
				<text>确认</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isurl: {},
				isway: 'wechat',
				user_data: {
					Telephone: '98989898989', //电话号码
					Number: '12345678910', //充值号
					Used_traffic: '128', //已用流量
					Remaining_traffic: '128', //剩余流量
					Balance: '0', //卡余额
					Days_remaining: '2', //剩余天数
				},
				left_select: [{
						Id: '1',
						Text: '热销榜',
						Details: [{
							Isid: '1',
							Url: '../../static/order/Hot_selling_list/1.jpg',
							Text: '月享300G/买一年送3个月',
							Monthly_average: '30.60',
							Prompt: '★热销榜：买1年送3个月,共计15个月.充值按天计算每30天为一个月包含3000G全国通用流量。',
							Order_price: '459.00'
						}, {
							Isid: '2',
							Url: '../../static/order/Hot_selling_list/2.jpg',
							Text: '月享1500G/一年有效',
							Monthly_average: '33.25',
							Prompt: '★热销榜：1年有效,共计12个月.充值按天计算每30天为一个月包含1500G全国通用流量。',
							Order_price: '399.00'
						}, {
							Isid: '3',
							Url: '../../static/order/Hot_selling_list/3.jpg',
							Text: '月享100G/买一年送1个月',
							Monthly_average: '19.92',
							Prompt: '★热销榜：买1年送1个月,共计13个月.充值按天计算每30天为一个月包含100G全国通用流量。',
							Order_price: '259.00'
						}, {
							Isid: '4',
							Url: '../../static/order/Hot_selling_list/4.jpg',
							Text: '月享60G/一年有效',
							Monthly_average: '16.58',
							Prompt: '★热销榜：1年有效,共计12个月.充值按天计算每30天为一个月包含60G全国通用流量。',
							Order_price: '199.00'
						}, {
							Isid: '5',
							Url: '../../static/order/Hot_selling_list/5.jpg',
							Text: '月享230G/6个月有效',
							Monthly_average: '24.83',
							Prompt: '★热销榜：半年有效,共计6个月.充值按天计算每30天为一个月包含230G全国通用流量。',
							Order_price: '149.00'
						}, {
							Isid: '6',
							Url: '../../static/order/Hot_selling_list/6.jpg',
							Text: '月享350G/3个月有效',
							Monthly_average: '33.00',
							Prompt: '★热销榜：共计3个月.充值按天计算每30天为一个月包含350G全国通用流量。',
							Order_price: '99.00'
						}, {
							Isid: '7',
							Url: '../../static/order/Hot_selling_list/7.jpg',
							Text: '月享3000G/30天有效',
							Monthly_average: '69.00',
							Prompt: '★热销榜：30天有效，包含3000G全国通用流量。',
							Order_price: '69.00'
						}, {
							Isid: '8',
							Url: '../../static/order/Hot_selling_list/8.jpg',
							Text: '月享100G/30天有效',
							Monthly_average: '39.00',
							Prompt: '★热销榜：30天有效，包含100G全国通用流量。',
							Order_price: '39.00'
						}, {
							Isid: '9',
							Url: '../../static/order/Hot_selling_list/9.jpg',
							Text: '月享30G/30天有效',
							Monthly_average: '19.00',
							Prompt: '★热销榜：30天有效，包含30G全国通用流量。',
							Order_price: '19.00'
						}]
					},
					{
						Id: '2',
						Text: '视频/游戏',
						Details: [{
							Isid: '1',
							Url: '../../static/order/Video_games/1.jpg',
							Text: '月享1500G/买4年送1年',
							Monthly_average: '13.82',
							Prompt: '★极速流量：买4年送1年,共计60个月.充值按天计算每30天为一个月包含1500G全国通用流量。',
							Order_price: '829.00'
						}, {
							Isid: '2',
							Url: '../../static/order/Video_games/2.jpg',
							Text: '月享1500G/买2年送6个',
							Monthly_average: '19.97',
							Prompt: '★极速流量：买2年送6个月,共计30个月.充值按天计算每30天为一个月包含1500G全国通用流量。',
							Order_price: '599.00'
						}, {
							Isid: '3',
							Url: '../../static/order/Video_games/3.jpg',
							Text: '月享1500G/1年有效',
							Monthly_average: '33.25',
							Prompt: '★极速流量：1年有效,共计12个月.充值按天计算每30天为一个月包含1500G全国通用流量。',
							Order_price: '399.00'
						}, {
							Isid: '4',
							Url: '../../static/order/Video_games/4.jpg',
							Text: '月享1500G/6个月有效',
							Monthly_average: '39.83',
							Prompt: '★极速流量：半年有效,共计6个月.充值按天计算每30天为一个月包含1500G全国通用流量。',
							Order_price: '239.00'
						}, {
							Isid: '5',
							Url: '../../static/order/Video_games/5.jpg',
							Text: '月享1500G/30天有效',
							Monthly_average: '59.00',
							Prompt: '★极速流量：30天有效,强烈推荐购买年包套餐(立省309元！！！)',
							Order_price: '59.00'
						}, {
							Isid: '6',
							Url: '../../static/order/Video_games/6.jpg',
							Text: '月享350G/1年有效',
							Monthly_average: '24.92',
							Prompt: '★极速流量：1年有效,共计12个月.充值按天计算每30天为一个月包含350G全国通用流量。',
							Order_price: '299.00'
						}, {
							Isid: '7',
							Url: '../../static/order/Video_games/7.jpg',
							Text: '月享350G/6个月有效',
							Monthly_average: '28.17',
							Prompt: '★极速流量：共计6个月.充值按天计算每30天为一个月包含350G全国通用流量。',
							Order_price: '169.00'
						}, {
							Isid: '8',
							Url: '../../static/order/Video_games/8.jpg',
							Text: '月享350G/3个月有效',
							Monthly_average: '33.00',
							Prompt: '★极速流量：共计3个月.充值按天计算每30天为一个月包含350G全国通用流量。',
							Order_price: '99.00'
						}, {
							Isid: '9',
							Url: '../../static/order/Video_games/9.jpg',
							Text: '月享230G/买1年送1年',
							Monthly_average: '16.63',
							Prompt: '★极速流量：买1年送1年,共计24个月.充值按天计算每30天为一个月包含230G全国通用流量。',
							Order_price: '399.00'
						}, {
							Isid: '10',
							Url: '../../static/order/Video_games/10.jpg',
							Text: '月享230G/6个月有效',
							Monthly_average: '24.83',
							Prompt: '★极速流量：共计6个月.充值按天计算每30天为一个月包含230G全国通用流量。',
							Order_price: '149.00'
						}, {
							Isid: '11',
							Url: '../../static/order/Video_games/11.jpg',
							Text: '月享230G/3个月有效',
							Monthly_average: '29.67',
							Prompt: '★极速流量：共计3个月.充值按天计算每30天为一个月包含230G全国通用流量。',
							Order_price: '89.00'
						}, {
							Isid: '12',
							Url: '../../static/order/Video_games/12.jpg',
							Text: '月享230G/30天有效',
							Monthly_average: '49.00',
							Prompt: '★极速流量：30天有效,强烈推荐购买年包套餐(立省389元！！！)',
							Order_price: '49.00'
						}]
					},
					{
						Id: '3',
						Text: '居家办公',
						Details: [{
							Isid: '1',
							Url: '../../static/order/Home_work/1.jpg',
							Text: '月享3000G/买3年送1年',
							Monthly_average: '15.81',
							Prompt: '★超大流量：买3年送1年,共计48个月.充值按天计算每30天为一个月包含3000G全国通用流量。',
							Order_price: '759.00'
						}, {
							Isid: '2',
							Url: '../../static/order/Home_work/2.jpg',
							Text: '月享3000G/买2年送6个月',
							Monthly_average: '23.30',
							Prompt: '★超大流量：买2年送6个月,共计30个月.充值按天计算每30天为一个月包含3000G全国通用流量。',
							Order_price: '699.00'
						}, {
							Isid: '3',
							Url: '../../static/order/Home_work/3.jpg',
							Text: '月享3000G/买1年送3个月',
							Monthly_average: '30.60',
							Prompt: '★超大流量：买1年送3个月,共计15个月.充值按天计算每30天为一个月包含3000G全国通用流量。',
							Order_price: '459.00'
						}, {
							Isid: '4',
							Url: '../../static/order/Home_work/4.jpg',
							Text: '月享3000G/买6个月送2个月',
							Monthly_average: '33.63',
							Prompt: '★超大流量：半年有效,共计6个月.充值按天计算每30天为一个月包含3000G全国通用流量。',
							Order_price: '269.00'
						}, {
							Isid: '5',
							Url: '../../static/order/Home_work/5.jpg',
							Text: '月享3000G/买3个月送1个月',
							Monthly_average: '42.25',
							Prompt: '★超大流量：共计3个月.充值按天计算每30天为一个月包含3000G全国通用流量。',
							Order_price: '169.00'
						}, {
							Isid: '6',
							Url: '../../static/order/Home_work/6.jpg',
							Text: '月享3000G/30天有效',
							Monthly_average: '69.00',
							Prompt: '★超大流量：30天有效，包含3000G全国通用流量,强烈推荐购买年包套餐(立省209元！！！)',
							Order_price: '69.00'
						}, {
							Isid: '7',
							Url: '../../static/order/Home_work/7.jpg',
							Text: '月享100G/30天有效',
							Monthly_average: '39.00',
							Prompt: '★尊享套餐：30天有效，包含100G全国通用流量。',
							Order_price: '39.00'
						}, {
							Isid: '8',
							Url: '../../static/order/Home_work/8.jpg',
							Text: '月享30G/30天有效',
							Monthly_average: '19.00',
							Prompt: '★尊享套餐：30天有效，包含30G全国通用流量。',
							Order_price: '19.00'
						}]
					},
					{
						Id: '4',
						Text: '加油包',
						Details: [{
							Isid: '1',
							Url: '../../static/order/Fuel_bag/1.jpg',
							Text: '69元包100G',
							Monthly_average: '69.00',
							Prompt: '★温馨提示：流量提前用完,可以充值加油包使用，到期时间和当前周期包结束时间一致。',
							Order_price: '69.00'
						}, {
							Isid: '2',
							Url: '../../static/order/Fuel_bag/2.jpg',
							Text: '49元包60G',
							Monthly_average: '49.00',
							Prompt: '★温馨提示：流量提前用完,可以充值加油包使用，到期时间和当前周期包结束时间一致。',
							Order_price: '49.00'
						}, {
							Isid: '3',
							Url: '../../static/order/Fuel_bag/3.jpg',
							Text: '29元包30G',
							Monthly_average: '29.00',
							Prompt: '★温馨提示：流量提前用完,可以充值加油包使用，到期时间和当前周期包结束时间一致。',
							Order_price: '29.00'
						}, {
							Isid: '4',
							Url: '../../static/order/Fuel_bag/4.jpg',
							Text: '19元包10G',
							Monthly_average: '19.00',
							Prompt: '★温馨提示：流量提前用完,可以充值加油包使用，到期时间和当前周期包结束时间一致。',
							Order_price: '19.00'
						}]
					}
				]
			};
		},
		onLoad(options) {
			const id = Number(options.id) - 1;
			const isid = Number(options.isid) - 1;
			this.isurl = this.left_select[id].Details[isid];
		}
	};
</script>

<style lang="scss" scoped>
	.template {
		width: 100vw;
		height: 100vh;
		background-color: #F5F5F5;
	}

	.top {
		width: 100vw;
		background-color: white;

		.image {
			width: 92vw;
			margin: 1vw 4vw;
			height: 34vw;
		}

		.text_box {
			width: 88vw;
			height: 15vw;
			padding: 0 6vw;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.text {
				font-size: 15px;
			}

			.istext {
				font-size: 13px;
				color: rgb(0, 85, 255);
				padding: 1vw 2vw;
				border-radius: 99px;
				background-color: #D8E7FF;
			}
		}

		.prompt {
			padding: 1vw 3vw;
			font-size: 13px;
			color: rgb(111, 111, 111);

			.ishr {
				size: 1px;
				color: #d4d4d4;
			}
		}

		.Order_price {
			width: 80vw;
			height: 12vw;
			padding: 0 10vw;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			font-weight: bold;
			color: rgb(0, 85, 255);
		}
	}

	.middle {
		width: 90vw;
		padding: 3vw 5vw;
		background-color: white;

		.waybox {
			margin: 5vw 0 2vw 0;
			justify-content: space-between;
		}

		.isway {
			display: flex;
			align-items: center;
		}

		.buttom {
			height: 5vw;
			width: 5vw;
		}

		.way_image {
			margin: 0 1vw;
			height: 8vw;
			width: 8vw;
		}
	}

	.middle_text {
		margin: 2vw 5vw;
		color: #5f5f5f;
		font-size: 12px;
	}

	.bottom {
		display: flex;
		position: absolute;
		bottom: 1vw;
		margin: 5vw;
		width: 90vw;
		height: 14vw;
		border-radius: 7vw;
		box-shadow: 0 0 5px #b4b4b4;

		.box {
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.left {
			width: 65%;
			height: 100%;
			background-color: white;
			border-radius: 7vw 0 0 7vw;
			.isOrder_price{
				color: red;
				font-size: 22px;
			}
		}

		.right {
			width: 35%;
			height: 100%;
			background-color: #ff1e1e;
			border-radius: 0 7vw 7vw 0;
			font-weight: bold;
			color: white;
		}
	}
</style>